import Head from 'next/head'
import Layout from '../../components/layouts/default'
import utilStyles from '../../styles/utils.module.css'
import { getSortedPostsData } from '../../lib/posts'
import { makeStyles } from '@material-ui/core/styles';
import TimeLine from './components/TimeLine'

const useStyles = makeStyles(({ breakpoints, spacing, palette }) => ({

}))

export default function Home({ allPostsData }) {
  const classes = useStyles()
  return (
    <Layout>
      <Head>
        <title>boboan</title>
      </Head>
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <TimeLine allPostsData={allPostsData} />
      </section>
    </Layout>
  )
}

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData
    }
  }
}
